<template>
    <view class="bg-content">
        <div id="statisticOrderNumber" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderSaleMoney" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderNumber24Hours" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderSaleMoney24Hours" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderNumberRecent30Days" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderSaleMoneyRecent30Days" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderNumberRecentMonthsOfYear" style="width: 380px; margin: 0 auto; height:380px;"></div>
        <div id="statisticOrderSaleMoneyRecentMonthsOfYear" style="width: 380px; margin: 0 auto; height:380px;"></div>
    </view>
</template>

<script>

    import {StoreReportService} from "@/dev/services/store-report.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    const echarts = require("@/pages/sub/sub2-store-platform/static/plugins/echarts.min.js");

    export default {
        data() {
            return {
                data: {
                    statisticOrderNumber: null,
                    statisticOrderSaleMoney: null,
                    statisticOrderNumber24Hours: null,
                    statisticOrderSaleMoney24Hours: null,
                    statisticOrderNumberRecent30Days: null,
                    statisticOrderSaleMoneyRecent30Days: null,
                    statisticOrderNumberRecentMonthsOfYear: null,
                    statisticOrderSaleMoneyRecentMonthsOfYear: null,
                }
            }
        },
        onReady() {
            const _self = this;
            new StoreReportService().statisticStoreInfo({
                storeId: _self.globalVariable.userInfo.tbStore.id,
                prevStoreId: _self.globalVariable.userInfo.tbStore.id
            }).then(result => {
                console.log(result)
                Object.assign(_self.data, CommonUtil.deleteNullAttrInObject(result));

                _self.data.statisticOrderNumber = {
                    title: {
                        text: '订单数'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['未支付订单', '未发货订单', '已发货订单', '确认收货订单', '交易成功订单', '退款中订单', '退款完成订单', '取消订单']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['未支付订单', '未发货订单', '已发货订单', '确认收货订单', '交易成功订单', '退款中订单', '退款完成订单', '取消订单'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '订单数',
                            type: 'bar',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [_self.data.statisticOrderNumber['0'], _self.data.statisticOrderNumber['1'], _self.data.statisticOrderNumber['2'], _self.data.statisticOrderNumber['3'], _self.data.statisticOrderNumber['4'], _self.data.statisticOrderNumber['5'], _self.data.statisticOrderNumber['refunding'], _self.data.statisticOrderNumber['6']]
                        }
                    ]
                };

                _self.data.statisticOrderSaleMoney = {
                    title: {
                        text: '销售额（单位/元）'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['未支付订单', '未发货订单', '已发货订单', '确认收货订单', '交易成功订单', '退款中订单', '退款完成订单', '取消订单']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['未支付订单', '未发货订单', '已发货订单', '确认收货订单', '交易成功订单', '退款中订单', '退款完成订单', '取消订单'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'bar',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [_self.data.statisticOrderSaleMoney['0'], _self.data.statisticOrderSaleMoney['1'], _self.data.statisticOrderSaleMoney['2'], _self.data.statisticOrderSaleMoney['3'], _self.data.statisticOrderSaleMoney['4'], _self.data.statisticOrderSaleMoney['5'], _self.data.statisticOrderSaleMoney['refunding'], _self.data.statisticOrderSaleMoney['6']]
                        }
                    ]
                };

                _self.data.statisticOrderNumber24Hours = {
                    title: {
                        text: '一天内24小时订单数'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderNumber24Hours.titleList
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderNumber24Hours.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '订单数=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderNumber24Hours.valueList
                        }
                    ]
                };

                _self.data.statisticOrderSaleMoney24Hours = {
                    title: {
                        text: '一天内24小时销售额（单位/元）'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderSaleMoney24Hours.titleList
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderSaleMoney24Hours.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderSaleMoney24Hours.valueList
                        }
                    ]
                };

                _self.data.statisticOrderNumberRecent30Days = {
                    title: {
                        text: '最近30天的订单数'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderNumberRecent30Days.titleList
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderNumberRecent30Days.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '订单数=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderNumberRecent30Days.valueList
                        }
                    ]
                };

                _self.data.statisticOrderSaleMoneyRecent30Days = {
                    title: {
                        text: '最近30天的销售额（单位/元）'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderSaleMoneyRecent30Days.titleList
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderSaleMoneyRecent30Days.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderSaleMoneyRecent30Days.valueList
                        }
                    ]
                };

                _self.data.statisticOrderNumberRecentMonthsOfYear = {
                    title: {
                        text: '最近一年的订单数'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderNumberRecentMonthsOfYear.titleList
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderNumberRecentMonthsOfYear.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '订单数=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderNumberRecentMonthsOfYear.valueList
                        }
                    ]
                };

                _self.data.statisticOrderSaleMoneyRecentMonthsOfYear = {
                    title: {
                        text: '最近一年的销售额（单位/元）'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: _self.data.statisticOrderSaleMoneyRecentMonthsOfYear.titleList
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _self.data.statisticOrderSaleMoneyRecentMonthsOfYear.titleList,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 40
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额=(待发货+已发货+确认收货+已完成)',
                            type: 'line',
                            barWidth: '60%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: _self.data.statisticOrderSaleMoneyRecentMonthsOfYear.valueList
                        }
                    ]
                };

                _self.createECharts("statisticOrderNumber", _self.data.statisticOrderNumber);
                _self.createECharts("statisticOrderSaleMoney", _self.data.statisticOrderSaleMoney);
                _self.createECharts("statisticOrderNumber24Hours", _self.data.statisticOrderNumber24Hours);
                _self.createECharts("statisticOrderSaleMoney24Hours", _self.data.statisticOrderSaleMoney24Hours);
                _self.createECharts("statisticOrderNumberRecent30Days", _self.data.statisticOrderNumberRecent30Days);
                _self.createECharts("statisticOrderSaleMoneyRecent30Days", _self.data.statisticOrderSaleMoneyRecent30Days);
                _self.createECharts("statisticOrderNumberRecentMonthsOfYear", _self.data.statisticOrderNumberRecentMonthsOfYear);
                _self.createECharts("statisticOrderSaleMoneyRecentMonthsOfYear", _self.data.statisticOrderSaleMoneyRecentMonthsOfYear);
            });
        },
        methods: {
            createECharts(elementId, options) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(elementId));
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(options);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .charts {
        width: 750 upx;
        height: 500 upx;
        background-color: #FFFFFF;
    }
</style>
